import { Layout, Menu } from 'antd';
import React from 'react';

import type { GetProp, MenuProps } from 'antd';

interface MenuItem {
  id: string;
  label: string;
  type?: 'main' | 'sub' | 'toggle';
  active?: boolean;
  children?: MenuItem[];
}

interface TgNavMenuProps {
  menuItems: MenuItem[];
  onMenuClick: (itemId: string) => void;
  activeKey?: string;
}

const { Sider } = Layout;

type AntdItems = GetProp<MenuProps, 'items'>;

const TgNavMenu: React.FC<TgNavMenuProps> = ({ menuItems, onMenuClick, activeKey }) => {
  const items: AntdItems = [];

  menuItems.forEach((item) => {
    if (item.type === 'main') {
      items.push({ key: item.id, label: item.label });
      if (item.children && item.children.length > 0) {
        item.children.forEach((child) => {
          items.push({ key: child.id, label: child.label });
        });
      }
    } else {
      items.push({ key: item.id, label: item.label });
    }
  });

  return (
    <Sider
      width={256}
      theme="light"
      style={{ background: '#fafafa', boxShadow: 'inset -1px 0 0 #f0f0f0' }}
    >
      {/* Logo 区域：天工 / 睿核，占位与简洁样式 */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          height: 56,
          padding: '12px 16px',
          borderBottom: '1px solid #f0f0f0',
          background: '#fff',
        }}
      >
        <div
          aria-label="Tiangong Logo"
          style={{
            width: 28,
            height: 28,
            borderRadius: 6,
            background: 'linear-gradient(135deg, #1677ff, #722ed1)',
            boxShadow: '0 2px 6px rgba(0,0,0,0.12) inset',
          }}
        />
        <div style={{ lineHeight: 1 }}>
          <div style={{ fontWeight: 700, color: '#1f1f1f' }}>天工</div>
          <div style={{ fontSize: 12, color: '#8c8c8c' }}>睿核</div>
        </div>
      </div>

      <Menu
        mode="inline"
        items={items}
        selectedKeys={activeKey ? [activeKey] : []}
        onClick={({ key }) => onMenuClick(String(key))}
        style={{ padding: '8px 8px', background: 'transparent', borderInlineEnd: 0 }}
        defaultOpenKeys={[]}
      />
    </Sider>
  );
};

export default TgNavMenu;
